<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>蜂巢图</title>
    <style>
    %{--设置点击侧边栏如果大于当前屏幕高度则地图会变形--}%
    #wrapper{
        min-height: 0!important;
    }
    </style>
    <!-- map -->
    <asset:javascript src="newMap/libs/ol/ol.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <asset:javascript src="newMap/libs/ol/xdmap.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/map.css" rel="stylesheet" type="text/css" />
    <!--libs-->
    <asset:stylesheet href="newMap/hivemap.css"/>
    <asset:javascript src="newMap/libs/hivemap/hexbinsource.js" type="text/javascript" />
    <asset:javascript src="newMap/libs/hivemap/hexgrid.js" type="text/javascript" />
    <asset:javascript src="newMap/libs/hivemap/utils.js" type="text/javascript" />
    <asset:javascript src="newMap/hivemap/hivemap.js"/>
    <style>
        #allmap ul li{
            list-style: none;
        }
        .pointSize,.pointLegend{
            width: 200px;
        }
        .pointSize{
            position: absolute;
            top: 0;
            left:20px;
            z-index: 2;
            background: #fff;
        }
        .pointLegend{
            position: absolute;
            top: 0;
            right:0;
            z-index: 2;
            float: right;
        }
    </style>
</head>
<body class="fixed-navbar fixed-sidebar">
<g:include view="map/Mapscript.gsp"/>
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>地图</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                蜂巢图
            </h2>
        </div>
    </div>
</div>
<g:include view="map/seachCommon.gsp"/>
<asset:javascript src="newMap/hivemap/doHive.js"/>
<div id="allmap" style="position: absolute;">
        <ul class="pointSize" style="display: none;">
            <li>
                蜂巢大小: <input id="size" type="range" min="1000" max="10000" value="5000"/>
            </li>
            <li>
                样式:
                <select id="style">
                    <option value="color">颜色</option>
                    <option value="gradient">梯度</option>
                    <option value="point">点</option>
                </select>
            </li>
        </ul>
        <div class="pointLegend" style="display: none;">
            <ul id="legend">
                <li>
                    图例:

                    <div class="legend mini"></div>
                    <span class="min"></span>-
                </li>
                <li>
                    <div class="legend"></div>
                    <span class="min"></span> - <span class="max"></span>
                </li>
                <li>
                    <div class="legend maxi"></div>
                    <span class="max"></span>+
                </li>
            </ul>
        </div>
</div>
<g:javascript>
    //var map = xdmap.mapInit('allmap',10,[13377091.446132127, 3533836.6916802684]);
    var url = '/map/heatData';
    var size = $("#size");
    var style = $("#style");
    var max = $(".max");
    var min = $(".min");
    var legend = $('#legend');
    var opacity = 0.5;
    var zoneNumber = $("#city").val();
    var center = hiveMap.getCenter(zoneNumber);
    var map = xdmap.mapInit('allmap',10,center);
    setTimeout(function () {
        hiveMap.getHiveMap({city:zoneNumber,currentMap:'heatMap'},style,size,min,max,legend,opacity);
    },1000)
</g:javascript>
</body>
</html>
